<template>
  <div>
    <el-tabs>
      <el-tab-pane label="权重数据">
        <div style="height:38px;line-height:38px;">
          <span>类型选择：</span>
          <el-select v-model="tgdzType" size="mini">
            <el-option v-for="item of tgdzTypes"
                       :key="item.type"
                       :label="item.label" :value="item.type"></el-option>
          </el-select>
          <el-button @click="handleQzNew" type="text" style="margin-left:40px;" size="small">新建</el-button>
        </div>
        <el-table :data="resList">
          <el-table-column prop="name" label="名称" width="120"></el-table-column>
          <el-table-column label="五行权重">
            <template slot-scope="scope">
              <el-table :data="scope.row.weights">
                <el-table-column prop="key" label="五行"></el-table-column>
                <el-table-column prop="value" label="权重"></el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="handleQzDel(scope.row)" type="text" size="small">删除</el-button>
              <el-button @click="handleQzUpdate(scope.row)" type="text" size="small">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="用神规则">
        <ys-data></ys-data>
      </el-tab-pane>
      <el-tab-pane label="病理规则">
        <bl-data></bl-data>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="编辑权重" :visible.sync="qzEditDialog">
      <el-form v-if="editingQz" style="margin:0 20px" label-width="80px">
        <el-form-item label="名字">
          <el-input v-model="editingQz.name"></el-input>
        </el-form-item>
        <el-form-item label="五行权重">
          <el-table :data="editingQz.weights" style="width:100%;padding:0 18px;border:1px solid #eee">
            <el-table-column label="五行" width="80">
              <template slot-scope="scope">
                <el-input v-model="scope.row.key" size="mini"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="权重" width="80">
              <template slot-scope="scope">
                <el-input v-model="scope.row.value" type="number" size="mini"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="handleQzItemDel(scope)" size="mini">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div>
            <el-button @click="handleQzItemNew" type="primary" size="small">新权重</el-button>
          </div>
        </el-form-item>
        <el-form-item align="right">
          <el-button type="primary" @click="handleSaveQz">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import YsData from "./ysData";
  import BlData from "./BlData";
  export default {
    components: {
      BlData,
      YsData },
    name: "bazi-data",
    data() {
      return {
        tgdzType: 1,
        tgdzTypes: [{
          type: 1,
          label: '天干数据表'
        }, {
          type: 2,
          label: '地支数据表'
        }, {
          type: 3,
          label: '地支组合数据表'
        }],
        resList: [],
        qzEditDialog:false,
        editingQz:null
      }
    },
    watch:{
      tgdzType(nv,ov){
        if(nv && nv>0){
          this.loadTgDz(nv)
        }
      }
    },
    created(){
      this.loadTgDz(this.tgdzType)
    },
    methods:{
      ...mapActions({fetch:'fetch'}),
      loadTgDz(type){
        this.fetch({
          name:"getQzByType",
          data:{type},
        }).then(res=>{
          console.log(res)
          this.resList = res
        }).catch(error => {
            console.log(error)
            this.$message.error(error)
          });
      },
      handleQzNew(){
        //初始化 editingQz
        this.editingQz = {type:this.tgdzType,name:'',weights:[]}
        //打开对话框
        this.qzEditDialog=true
      },
      handleQzUpdate(row){
        //更新也需要打开对话框
        this.editingQz = row
        this.qzEditDialog=true
      },
      handleQzDel(row){

      },
      handleSaveQz(){
        //先判断 更新还是新增
        let data = {type:this.editingQz.type,name:this.editingQz.name,qz:JSON.stringify(this.editingQz.weights)}
        let api = "addQuanzhong"
        let isNew = true
        if(this.editingQz.id) {
          api = "updateQuanzhong"
          data.id=this.editingQz.id
          isNew = false
        }
        this.fetch({
          name:api,
          data,
        }).then(res=>{
          console.log(res)
          this.qzEditDialog=false
          this.editingQz = null
          //当是新增的时候 添加返回的内容
          if(isNew)
            this.resList.push(res)
        }).catch(err=>{
          console.log(err)
          this.$message.error(err)
        })
      },
      handleQzItemDel(scope){
        this.editingQz.weights.splice(scope.$index,1)
      },
      handleQzItemNew(){
        this.editingQz.weights.push({key:'',value:1})
      }
    }
  }
</script>

<style lang="scss">

</style>
